<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debug</title>

    <link rel="icon" href="img/logo.png" type="image/x-icon" />

    <script src="js/jquery.min.js"></script>

    <!-- eel(python) -->
    <script type="text/javascript" src="./eel.js"></script>

    <!-- Import Vue 3 -->
    <script src="js/m_vue3.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

    <!-- vue 路由 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue-router/4.1.6/vue-router.global.js"></script> -->

    <!-- axios -->
    <script src="js/m_axios.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->

    <!-- Import component library -->
    <script src="js/m_element-plus.js"></script>
    <!-- <script src="https://unpkg.com/element-plus"></script> -->

    <!-- echarts -->
    <!-- <script src="js/echarts.js"></script> -->
    <script src="js/echart.min.js"></script>

    <!-- icon -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
        integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Import style -->
    <link rel="stylesheet" href="css/m_element-plus.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /> -->

    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/m_vxe-table.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/vxe-table@next/lib/style.css"> -->
    <!-- 引入脚本 -->
    <script src="js/m_xe-utils.js"></script>
    <!-- <script src="https://unpkg.com/xe-utils"></script> -->
    <script src="js/m_vx-table.js"></script>
    <!-- <script src="https://unpkg.com/vxe-table@next"></script> -->



    <link rel="stylesheet" href="css/index.css">
    <!-- <link rel="stylesheet" href="css/step.css"> -->
    <link rel="stylesheet" href="css/stock.css">


</head>

<body>

    <div id="app">
        <!-- 整个屏幕container -->
        <el-container class="index_container">
            <!-- mian-aside 左边 -->
            <el-aside width="200px" class="index_aside">
                <!-- aside 的顶部（icon 和 title） -->
                <div class="index_aside_top">
                    <img src="img/logo.png" alt="logo">
                    <span>TiTiuper</span>
                </div>


                <div class="index_aside_menu">
                    <!-- index 首页 -->
                    <div class="index_aside_menu_item" @click="jumpToHomeHtml">
                        <img src="/img/menu/index_gray.png" alt="首页">
                        <span>首页</span>
                    </div>
                    <!-- 股票管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStockHtml">
                        <img src="/img/menu/list.png" alt="股票管理">
                        <span>股票管理</span>
                    </div>
                    <!-- 策略管理 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/task_gray.png" alt="策略管理">
                        <span>策略管理</span>
                    </div>
                    <!-- 单步执行 -->
                    <div class="index_aside_menu_item index_aside_menu_item_selected" @click="jumpToSetpHtml">
                        <img src="/img/menu/run_gray.png" alt="单步执行">
                        <span>单步执行</span>
                    </div>
                    <!-- 多股票执行 -->
                    <div class="index_aside_menu_item" @click="jumpToDebugHtml">
                        <img src="/img/menu/column_gray.png" alt="多股票执行">
                        <span>多股票执行</span>
                    </div>
                    <!-- 数据调整 -->
                    <div class="index_aside_menu_item" @click="jumpToStrategyHtml">
                        <img src="/img/menu/data_gray.png" alt="数据调整">
                        <span>数据调整</span>
                    </div>
                    <!-- 运营管理 -->
                    <div class="index_aside_menu_item" @click="jumpTooperationHtml">
                        <img src="/img/menu/list_gray.png" alt="运营管理">
                        <span>运营管理</span>
                    </div>
                    <!-- 设置 -->
                    <!-- <div class="index_aside_menu_item">
                                                    <img src="/img/menu/setting_gray.png" alt="设置">
                                                    <span>Setting</span>
                                                </div> -->
                </div>

            </el-aside>

            <el-main>


                <el-header>
                    <el-container>
                        <i class="fa fa-linkedin-square margin10" style="margin: 0 10px;"></i>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                            <el-breadcrumb-item><a href="">promotion management</a></el-breadcrumb-item>
                            <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                            <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-container>
                    <el-divider />
                </el-header>

                <el-card class="main_card">

                    <el-scrollbar max-height="100%">

                        <el-main class="index_main">

                            <div class="echard_title_box">
                                <div class="card_title_box">
                                    <span class="card_title_box_chinese">脚本运行测试</span>
                                    <span>&nbsp;- Debug All Stock</span>
                                </div>
                            </div>

                            <el-divider></el-divider>

                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <div style="min-height: 80vh;">

                                        <vxe-toolbar>
                                            <template #buttons>
                                                <vxe-input v-model="searchExitContent" type="search"
                                                    placeholder="搜索已经存在的股票" @keyup="searchExitEvent"></vxe-input>
                                            </template>
                                        </vxe-toolbar>

                                        <vxe-table ref="m_xTable_exit" :data="exitTableStock" height="100%"
                                            max-height="100%" min-height="88vh" stripe
                                            :row-config="{isCurrent: true, isHover: true}">
                                            <vxe-column type="checkbox" width="60"></vxe-column>
                                            <vxe-column type="seq" title="No"></vxe-column>
                                            <vxe-column field="code" title="代码" type="html" sortable></vxe-column>
                                            <vxe-column field="name" title="名称" type="html" sortable></vxe-column>
                                            <vxe-column field="price" title="最新价" type="html" sortable></vxe-column>
                                            <vxe-column title="操作">
                                                <template #default="{row}">
                                                    <el-button type="danger" plain>删除</el-button>
                                                </template>
                                            </vxe-column>
                                        </vxe-table>
                                    </div>
                                </el-col>


                                <el-col :span="12">
                                    <vxe-toolbar class-name="mtoolbar">
                                        <template #buttons>
                                            <el-input v-model="searchOtherContent" @change="searchOtherHandler"
                                                placeholder="代码/名字/价格   : 560120,贵州茅台,[1-9],{600*},{*茅台}" />
                                            <!-- <vxe-input v-model="searchOtherCodeContent" type="search" placeholder="代码/名称/价格"
                                                @keyup="searchOtherByCode">
                                            </vxe-input> -->
                                        </template>
                                    </vxe-toolbar>
                                    <vxe-table ref="m_xTable_other" :data="otherTableStock" height="100%"
                                        max-height="100%" stripe :row-config="{isCurrent: true, isHover: true}">
                                        <vxe-column type="checkbox" width="60"></vxe-column>
                                        <vxe-column type="seq" title="No"></vxe-column>
                                        <vxe-column field="code" title="代码" type="html" sortable></vxe-column>
                                        <vxe-column field="name" title="名称" type="html" sortable></vxe-column>
                                        <vxe-column field="price" title="最新价" type="html" sortable></vxe-column>
                                        <vxe-column title="操作">
                                            <template #default="{row}">
                                                <el-button v-show="row.asset_end" type="danger" plain
                                                    @click="deleteStock(row.代码)">
                                                    <!-- <i class="fa fa-step-forward" style="margin: 0 5px;"></i>  -->
                                                    ×
                                                </el-button>
                                            </template>
                                        </vxe-column>
                                    </vxe-table>
                                </el-col>

                            </el-row>

                        </el-main>

                    </el-scrollbar>


                </el-card>
            </el-main>

        </el-container>
    </div>


    <script>

        charset = "utf-8"

        // 打开警告弹窗
        const warn_noStrategy = () => {
            ElNotification({
                title: 'Warning',
                message: 'This is a warning message',
                type: 'warning',
            })
        };

        const App = {
            el: '#app',
            data() {
                return {
                    "xtable_exit": null,
                    "xtable_other": null,

                    "stockEnum": [],
                    "exitAllStock": [],
                    "otherAllStock": [],
                    "exitTableStock": [],
                    "otherTableStock": [],


                    "searchExitContent": "",
                    "searchOtherContent": "",
                    "searchOtherCodeContent": "",
                    "searchOtherNameContent": "",
                    "searchOtherPriceContent": "",

                    "exitStockTableLoading": false,
                    "otherStockTableLoading": false
                }
            },


            methods: {
                //测试跳转test.html
                jumpToHomeHtml() {
                    window.location.href = "/home.html";
                },
                jumpToSetpHtml() {
                    window.location.href = "/step.html";
                },
                jumpToDebugHtml() {
                    window.location.href = "/debug.html";
                },
                jumpToStrategyHtml() {
                    window.location.href = "/strategy.html";
                },
                jumpTooperationHtml() {
                    window.location.href = "/operation.html";
                },
                jumpToStockHtml() {
                    window.location.href = "/stock.html";
                },


                selectExitStockHandler() {

                },

                deleteStock(code) {

                },

                searchExitEvent() {
                    const filterName = XEUtils.toValueString(this.searchExitContent).trim().toLowerCase()
                    if (filterName) {
                        const filterRE = new RegExp(filterName, 'gi')
                        const searchProps = ['code', 'name', 'price']
                        const rest = this.exitAllStock.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterName) > -1))
                        this.exitTableStock = rest.map(row => {
                            const item = Object.assign({}, row)
                            searchProps.forEach(key => {
                                item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `<span class="keyword-lighten">${match}</span>`)
                            })
                            return item
                        })
                    } else {
                        this.exitTableStock = this.exitAllStock
                    }
                },



                searchOtherHandler() {
                    if (this.searchOtherContent != "") {
                        let arr = this.searchOtherContent.split(",");
                        for (let i = 0; i < arr.length; i++) {
                            item = arr[i];
                            // {600*} 正则表达式


                        }
                    } else {
                        this.otherTableStock = [];
                    }
                },

                searchOtherByCode() {
                    // console.log('this.searchOtherCodeContent :>> ', this.searchOtherCodeContent);
                    let arr = this.searchOtherCodeContent.split(',')
                    console.log(arr);
                    if (this.searchOtherCodeContent)
                        this.otherTableStock = this.otherAllStock.filter(item => {
                            // console.log('item.code :>> ', item.code);
                            return arr.includes(item.code)
                        })
                    else {
                        this.otherTableStock = []
                    }
                },


                init_data() {
                    let flag = false;
                    flag = eel.get_stock_list();
                    axios.get('stockDetail/stock_yes.json',).then((res) => {
                        data = res.data
                        // console.log('yes_data :>> ', data);
                        this.exitTableStock = res.data;
                        this.exitAllStock = res.data;
                    });
                    axios.get('stockDetail/stock_no.json').then((res) => {
                        data = res.data
                        // console.log('no_data :>> ', data);
                        // this.otherTableStock = res.data;
                        this.otherTableStock = []
                        this.otherAllStock = res.data;
                    });
                },



            },
            /*end - method */





            mounted() {
                this.xtable_exit = this.$refs.m_xTable_exit;
                this.xtable_other = this.$refs.m_xTable_other;
                this.init_data();
            },

        }

        const app = Vue.createApp(App);
        app.use(ElementPlus);
        app.use(VXETable);
        app.mount("#app");

        VXETable.formats.mixin({
            // 四舍五入,默认两位数
            formatFixedNumber({ cellValue }, digits = 2) {
                return XEUtils.toFixed(XEUtils.round(cellValue, digits), digits)
            },
        });

    </script>

</body>

</html>